<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>移动端多弹框滑动系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        
        h1 {
            color: white;
            margin-bottom: 30px;
            font-size: 24px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .btn-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .btn {
            padding: 15px 25px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            color: #667eea;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .tip {
            background: rgba(255,255,255,0.9);
            padding: 15px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.5;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        /* 弹框容器样式 */
        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .dialog-overlay.active {
            opacity: 1;
        }
        
        .dialog-carousel {
            width: 90%;
            max-width: 350px;
            height: 70%;
            max-height: 500px;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .dialog-track {
            display: flex;
            height: 100%;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .dialog-slide {
            min-width: 100%;
            height: 100%;
            background: white;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .dialog-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .close-btn:hover {
            background: #f5f5f5;
            color: #666;
        }
        
        .dialog-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            text-align: left;
        }
        
        .dialog-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .dialog-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .dialog-btn.primary {
            background: #667eea;
            color: white;
        }
        
        .dialog-btn.secondary {
            background: #f5f5f5;
            color: #666;
        }
        
        .dialog-indicators {
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            transition: all 0.3s;
        }
        
        .indicator.active {
            background: white;
            transform: scale(1.2);
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .dialog-carousel {
                width: 95%;
                height: 75%;
            }
            
            .dialog-title {
                font-size: 16px;
            }
            
            .dialog-content {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>移动端多弹框滑动系统</h1>
        
        <div class="btn-group">
            <button class="btn" id="showDialogs">显示多个弹框</button>
            <button class="btn" id="showInfoDialogs">显示信息弹框</button>
            <button class="btn" id="showFormDialogs">显示表单弹框</button>
        </div>
        
        <div class="tip">
            <strong>操作提示：</strong>在弹框中可以左右滑动切换，点击指示点快速跳转，或点击关闭按钮退出。
        </div>
    </div>

    <!-- 弹框容器 -->
    <div class="dialog-overlay" id="dialogOverlay">
        <div class="dialog-carousel">
            <div class="dialog-track" id="dialogTrack">
                <!-- 弹框内容将通过JS动态生成 -->
            </div>
            <div class="dialog-indicators" id="dialogIndicators">
                <!-- 指示点将通过JS动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 弹框数据
        const dialogData = {
            default: [
                {
                    title: '欢迎使用',
                    content: '<p>这是一个支持左右滑动的移动端弹框系统。</p><p>您可以向左或向右滑动来切换不同的弹框内容。</p>',
                    primaryBtn: '开始体验',
                    secondaryBtn: '了解更多'
                },
                {
                    title: '功能特点',
                    content: '<p>✅ 响应式设计，完美适配移动端</p><p>✅ 支持左右滑动切换</p><p>✅ 点击指示点快速跳转</p><p>✅ 流畅的动画效果</p><p>✅ 易于自定义和扩展</p>',
                    primaryBtn: '下一步',
                    secondaryBtn: '上一步'
                },
                {
                    title: '使用说明',
                    content: '<p>1. 在弹框中左右滑动手指可以切换内容</p><p>2. 点击底部的圆点可以快速跳转到指定页面</p><p>3. 点击右上角的X按钮可以关闭弹框</p><p>4. 您可以根据需要自定义弹框内容和样式</p>',
                    primaryBtn: '完成',
                    secondaryBtn: '上一步'
                }
            ],
            info: [
                {
                    title: '系统信息',
                    content: '<p>当前系统运行正常，所有功能均可使用。</p><p>版本：v1.0.0</p><p>更新时间：2023年11月</p>',
                    primaryBtn: '确定',
                    secondaryBtn: null
                },
                {
                    title: '通知消息',
                    content: '<p>您有3条未读消息</p><ul><li>系统维护通知</li><li>新功能上线</li><li>安全提醒</li></ul>',
                    primaryBtn: '查看详情',
                    secondaryBtn: '忽略'
                },
                {
                    title: '操作成功',
                    content: '<p style="text-align:center;color:#4CAF50;font-size:48px;">✓</p><p style="text-align:center;">您的操作已成功完成！</p>',
                    primaryBtn: '确定',
                    secondaryBtn: null
                }
            ],
            form: [
                {
                    title: '用户登录',
                    content: '<form id="loginForm"><div style="margin-bottom:15px;"><label style="display:block;margin-bottom:5px;font-weight:500;">用户名</label><input type="text" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;"></div><div style="margin-bottom:15px;"><label style="display:block;margin-bottom:5px;font-weight:500;">密码</label><input type="password" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;"></div></form>',
                    primaryBtn: '登录',
                    secondaryBtn: '注册'
                },
                {
                    title: '反馈表单',
                    content: '<form id="feedbackForm"><div style="margin-bottom:15px;"><label style="display:block;margin-bottom:5px;font-weight:500;">反馈类型</label><select style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;"><option>功能建议</option><option>问题反馈</option><option>其他</option></select></div><div style="margin-bottom:15px;"><label style="display:block;margin-bottom:5px;font-weight:500;">详细描述</label><textarea style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;height:100px;resize:none;"></textarea></div></form>',
                    primaryBtn: '提交',
                    secondaryBtn: '取消'
                }
            ]
        };

        // DOM元素
        const dialogOverlay = document.getElementById('dialogOverlay');
        const dialogTrack = document.getElementById('dialogTrack');
        const dialogIndicators = document.getElementById('dialogIndicators');
        
        // 状态变量
        let currentSlide = 0;
        let totalSlides = 0;
        let startX = 0;
        let currentX = 0;
        let isDragging = false;
        let currentDialogType = 'default';

        // 初始化事件监听
        document.getElementById('showDialogs').addEventListener('click', () => {
            showDialogs('default');
        });
        
        document.getElementById('showInfoDialogs').addEventListener('click', () => {
            showDialogs('info');
        });
        
        document.getElementById('showFormDialogs').addEventListener('click', () => {
            showDialogs('form');
        });

        // 显示弹框
        function showDialogs(type) {
            currentDialogType = type;
            const dialogs = dialogData[type];
            totalSlides = dialogs.length;
            currentSlide = 0;
            
            // 清空现有内容
            dialogTrack.innerHTML = '';
            dialogIndicators.innerHTML = '';
            
            // 生成弹框内容
            dialogs.forEach((dialog, index) => {
                // 创建弹框slide
                const slide = document.createElement('div');
                slide.className = 'dialog-slide';
                slide.innerHTML = `
                    <div class="dialog-header">
                        <div class="dialog-title">${dialog.title}</div>
                        <button class="close-btn" onclick="closeDialogs()">×</button>
                    </div>
                    <div class="dialog-content">${dialog.content}</div>
                    <div class="dialog-footer">
                        ${dialog.secondaryBtn ? `<button class="dialog-btn secondary" onclick="handleSecondaryClick(${index})">${dialog.secondaryBtn}</button>` : ''}
                        <button class="dialog-btn primary" onclick="handlePrimaryClick(${index})">${dialog.primaryBtn}</button>
                    </div>
                `;
                dialogTrack.appendChild(slide);
                
                // 创建指示点
                const indicator = document.createElement('div');
                indicator.className = `indicator ${index === 0 ? 'active' : ''}`;
                indicator.addEventListener('click', () => {
                    goToSlide(index);
                });
                dialogIndicators.appendChild(indicator);
            });
            
            // 显示弹框
            dialogOverlay.style.display = 'flex';
            setTimeout(() => {
                dialogOverlay.classList.add('active');
                updateCarousel();
            }, 10);
            
            // 添加触摸事件
            addTouchEvents();
        }

        // 关闭弹框
        function closeDialogs() {
            dialogOverlay.classList.remove('active');
            setTimeout(() => {
                dialogOverlay.style.display = 'none';
            }, 300);
        }

        // 处理主按钮点击
        function handlePrimaryClick(index) {
            const dialogs = dialogData[currentDialogType];
            if (index < totalSlides - 1) {
                // 如果不是最后一页，切换到下一页
                goToSlide(index + 1);
            } else {
                // 如果是最后一页，关闭弹框
                closeDialogs();
            }
        }

        // 处理次按钮点击
        function handleSecondaryClick(index) {
            if (index > 0) {
                // 如果不是第一页，切换到上一页
                goToSlide(index - 1);
            } else {
                // 如果是第一页，关闭弹框
                closeDialogs();
            }
        }

        // 跳转到指定slide
        function goToSlide(index) {
            if (index >= 0 && index < totalSlides) {
                currentSlide = index;
                updateCarousel();
                updateIndicators();
            }
        }

        // 更新轮播位置
        function updateCarousel() {
            dialogTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
        }

        // 更新指示点状态
        function updateIndicators() {
            const indicators = document.querySelectorAll('.indicator');
            indicators.forEach((indicator, index) => {
                if (index === currentSlide) {
                    indicator.classList.add('active');
                } else {
                    indicator.classList.remove('active');
                }
            });
        }

        // 添加触摸事件
        function addTouchEvents() {
            dialogTrack.addEventListener('touchstart', handleTouchStart, { passive: false });
            dialogTrack.addEventListener('touchmove', handleTouchMove, { passive: false });
            dialogTrack.addEventListener('touchend', handleTouchEnd);
            
            // 也支持鼠标事件（用于测试）
            dialogTrack.addEventListener('mousedown', handleMouseDown);
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        }

        // 触摸开始
        function handleTouchStart(e) {
            startX = e.touches[0].clientX;
            currentX = startX;
            isDragging = true;
            dialogTrack.style.transition = 'none';
        }

        // 触摸移动
        function handleTouchMove(e) {
            if (!isDragging) return;
            e.preventDefault();
            
            currentX = e.touches[0].clientX;
            const diff = currentX - startX;
            
            // 限制滑动范围
            if ((currentSlide === 0 && diff > 0) || (currentSlide === totalSlides - 1 && diff < 0)) {
                return;
            }
            
            const translateX = -currentSlide * 100 + (diff / dialogTrack.offsetWidth) * 100;
            dialogTrack.style.transform = `translateX(${translateX}%)`;
        }

        // 触摸结束
        function handleTouchEnd() {
            if (!isDragging) return;
            isDragging = false;
            
            const diff = currentX - startX;
            const threshold = 50; // 滑动阈值
            
            if (Math.abs(diff) > threshold) {
                if (diff > 0 && currentSlide > 0) {
                    // 向右滑动，上一页
                    goToSlide(currentSlide - 1);
                } else if (diff < 0 && currentSlide < totalSlides - 1) {
                    // 向左滑动，下一页
                    goToSlide(currentSlide + 1);
                } else {
                    // 未达到阈值或无法滑动，回到原位置
                    updateCarousel();
                }
            } else {
                // 未达到阈值，回到原位置
                updateCarousel();
            }
            
            dialogTrack.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        }

        // 鼠标事件处理（用于测试）
        function handleMouseDown(e) {
            startX = e.clientX;
            currentX = startX;
            isDragging = true;
            dialogTrack.style.transition = 'none';
        }

        function handleMouseMove(e) {
            if (!isDragging) return;
            
            currentX = e.clientX;
            const diff = currentX - startX;
            
            // 限制滑动范围
            if ((currentSlide === 0 && diff > 0) || (currentSlide === totalSlides - 1 && diff < 0)) {
                return;
            }
            
            const translateX = -currentSlide * 100 + (diff / dialogTrack.offsetWidth) * 100;
            dialogTrack.style.transform = `translateX(${translateX}%)`;
        }

        function handleMouseUp() {
            if (!isDragging) return;
            isDragging = false;
            
            const diff = currentX - startX;
            const threshold = 50; // 滑动阈值
            
            if (Math.abs(diff) > threshold) {
                if (diff > 0 && currentSlide > 0) {
                    // 向右滑动，上一页
                    goToSlide(currentSlide - 1);
                } else if (diff < 0 && currentSlide < totalSlides - 1) {
                    // 向左滑动，下一页
                    goToSlide(currentSlide + 1);
                } else {
                    // 未达到阈值或无法滑动，回到原位置
                    updateCarousel();
                }
            } else {
                // 未达到阈值，回到原位置
                updateCarousel();
            }
            
            dialogTrack.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
        }

        // 点击遮罩层关闭（可选）
        dialogOverlay.addEventListener('click', (e) => {
            if (e.target === dialogOverlay) {
                closeDialogs();
            }
        });
    </script>
</body>
</html>
